import React, { Component } from 'react'
import { toast } from 'react-toastify'
import { blowfish } from 'utils/tools'
import { updateContact, updateContactSuccess, getUserInfo2, validatePassword } from 'utils/Api'
class Phone extends Component {
  constructor() {
    super()
    this.state = {
      phone: '',
      modify: false,
      code: '',
      pending: false,
      countdown: 60,
      success: false,
      passwordVer: false,
      password: ''
    }
  }
  componentDidMount() {
    getUserInfo2()
      .then(({ msg, result }) => {
        if (msg === '200') {
          this.setState({
            phone: result.phone || ''
          })
        }
      })
  }
  componentWillUnmount() {
    clearInterval(this.timer)
  }
  changeValue = (e) => {
    const { name, value } = e.target
    this.setState({
      [name]: value
    })
  }
  activePassword = (e) => {
    e.preventDefault()
    this.setState({
      passwordVer: true
    })
  }
  activeModify = (e) => {
    e.preventDefault()
    this.setState({
      modify: true
    })
  }
  getCode = (e) => {
    if (!(/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/.test(this.state.phone))) {
      toast.info('手机号码有误，请重填', {
        position: toast.POSITION.BOTTOM_CENTER,
        pauseOnHover: false,
        hideProgressBar: true,
        autoClose: 3000,
      })
      this.setState({
        phone: ''
      })
      return
    }
    e.preventDefault()
    var fd = new FormData()
    fd.append('verifyWay', 0)
    fd.append('verify', this.state.phone)
    updateContact(fd)
      .then(({ msg, result }) => {
        if (msg === '200') {
          this.code = result
          this.setState({
            pending: true
          })
          this.timer = setInterval(() => {
            const { countdown } = this.state
            if (0 === countdown) {
              clearInterval(this.timer)
              this.setState({
                pending: false,
                countdown: 60
              })
              return
            }
            this.setState({
              countdown: countdown - 1
            })
          }, 1000)
        }
      })
  }
  submit = (e) => {
    e.preventDefault()

    if (this.state.code === this.code) {
      var fd = new FormData()
      fd.append('verifyWay', 0)
      fd.append('verify', this.state.phone)
      updateContactSuccess(fd)
        .then(({ msg }) => {
          if (msg === '200') {
            toast.success('手机号修改成功', {
              autoClose: 1000
            })
            this.setState({
              success: true,
              code: '',
              countdown: 60,
              pending: false,
              success: false,
              modify: false
            })
            clearInterval(this.timer)
          }
        })
    } else {
      toast.error('验证码输入不正确')
      this.setState({
        code: ''
      })
    }

  }
  cancel = (e) => {
    this.setState({
      modify: false,
      countdown: 60,
      pending: false
    })
    clearInterval(this.timer)
  }
  vailPassword = (e) => {
    e.preventDefault()
    if (!this.state.password) {
      toast.info('请输入密码')
      return
    }
    const fd = new FormData()
    fd.append('password', blowfish(this.state.password))
    validatePassword(fd)
      .then(({ msg, result }) => {
        if (msg === '200') {
          if (result === 'true') {
            toast.success('密码验证成功', {
              autoClose: 2000
            })
            this.setState({
              modify: true,
              passwordVer: false,
              password: '',
            })
          } else {
            this.setState({
              password: ''
            })
          }
        }
      })
  }
  render() {
    return (
      this.state.passwordVer ?
        <form onSubmit={this.vailPassword}><div className="box">
          <label htmlFor="password">验证密码：</label>
          <input type="password" id='password' name='password' value={this.state.password} onChange={this.changeValue} />
          <div className="modify">
            <button className='submit'>验证</button>
          </div>
        </div>
        </form> :
        <form onSubmit={this.submit}>
          <div className='box'>
            <label htmlFor="phone">手机：</label>
            <input type="text" disabled={!this.state.modify} name="phone" id="phone"
              value={this.state.phone}
              onChange={this.changeValue} />
            {!this.state.modify ?
              <div className='noModify'><a href="#" onClick={this.activePassword}>更改</a></div>
              : <div className='modify'>
                <input type="text" name='code' className='code' value={this.state.code}
                  onChange={this.changeValue} />
                {
                  !this.state.pending ?
                    <a href="#" onClick={this.getCode}>获取手机验证码</a> :
                    <a href="#" onClick={e => e.preventDefault()}>重新获取（{this.state.countdown}s）</a>
                }
                <input type="submit" value="保存" className='submit' />
                <input type="button" value="取消" className='submit' onClick={this.cancel} />

              </div>
            }
            {/* {this.state.success && <div className='tips'>操作成功!!</div>} */}
          </div>
        </form>
    )

  }
}

export default Phone